<!-- 商城 - 单张优惠券展示组件 -->
<template>
	<view class="vk-mall-user-coupon list-item" :class="{'coupon-lose':disableCom?true:false}">
		<view class="content" @click="click">
			<view class="left">
				<view class="discounts">
					<block v-if="coupon.type === 1">
						<text class="min">￥</text>
						<text class="max">{{ parseFloat(vk.pubfn.priceFilter(coupon.coupon_rule.discount_amount)) }}</text>
					</block>
					<block v-if="coupon.type === 2">
						<text class="max">{{ vk.pubfn.discountFilter(coupon.coupon_rule.discount_proportion) }}</text>
					</block>
				</view>
				<view class="full-reduction">{{ reductionCom }}</view>
				<view class="jag"></view>
			</view>
			<view class="right">
				<view class="info-title">
					<view class="tag" v-if="coupon.only_original_price_use"><text>原价</text></view>
					<view class="tag"><text>{{ typeCom }}</text></view>
					<view class="title"><text>{{ availableRangeRuleCom }}</text></view>
				</view>
				<view class="date-get">
					<view class="date"><text class="text-one">{{ effectiveTimeRuleCom }}</text></view>
					<view class="get" @click="receiveCoupon" v-if="!coupon.receiveRes || coupon.receiveRes.status == 0">
						<text v-if="coupon.receive_rule.mode == 1 && coupon.receive_rule.integral">{{ coupon.receive_rule.integral }}积分兑换</text>
						<text v-else>立即领取</text>
					</view>
					<view class="get" @click="pageToGoodsList" v-else-if="coupon.receiveRes.status == 1">
						<text>立即使用</text>
					</view>
					<view class="get" v-else-if="coupon.receiveRes.status == -1">
						<text>{{ coupon.receiveRes.msg }}</text>
					</view>
					<view class="get" v-else-if="coupon.receiveRes.status == -2">
						<u-count-down :timestamp="coupon.receive_start_time_diff" @change="countDownChange($event,coupon)" @finish="coupon.receiveRes.status=0">
							<text>{{ coupon.receive_start_time_str }}后</text>
						</u-count-down>
						<!-- <text>{{ vk.pubfn.dateDiff2(coupon.receive_start_time) }}后</text> -->
					</view>
				</view>
				<view class="describe-title">
					<text>详细信息</text>
					<view @click.stop="footerActived = !footerActived">
						<u-icon name="arrow-down" v-if="footerActived"></u-icon>
						<u-icon name="arrow-up" v-else></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="collapse" :class="footerActived ? 'actived' : ''">
			<view>优惠券名称：{{ coupon.name }}</view>
			<view>最早可领取时间：{{ vk.pubfn.timeFormat(coupon.receive_start_time) }}</view>
			<view>最晚可领取时间：{{ vk.pubfn.timeFormat(coupon.receive_end_time) }}</view>
			<view>最多可领取：{{ coupon.limit }} 张</view>
			<view>{{ effectiveTimeRuleCom }}</view>
			<view>使用说明：{{ coupon.describe }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-mall-user-coupon",
	props: {
		// 优惠券信息
		coupon:{
			Type:Object,
			default:function(){
				return {
				};
			}
		},
		// /**
		//  * 模式
		//  * receive 显示领取按钮
		//  * list 显示立即使用按钮
		//  * default 不显示功能按钮
		//  */
		// mode:{
		// 	Type:String,
		// 	default:""
		// }
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			// 每一项底部的拓展按钮
			footerActived: false
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},
		click(){
			let that = this;
			let { coupon } = that;
			that.$emit("click", { coupon });
		},
		checkboxChange(obj){
			this.click();
		},
		// 领取优惠券
		receiveCoupon(){
			let that = this;
			let { vk, coupon } = that;
			vk.callFunction({
				url: 'client/user.receiveCoupon',
				title: '领取中...',
				data: {
					coupon_id: coupon._id
				},
				success: (data) => {
					vk.confirm('领取成功', '提示', '立即使用', '等会使用', res => {
						if (res.confirm) {
							that.pageToGoodsList();
						}
					});
					that.$set(coupon,"receiveRes",{
						status:1
					});
				}
			});
		},
		pageToGoodsList(){
			let that = this;
			let { vk, coupon } = that;
			// 显示该优惠券可以购买的商品列表
			vk.navigateTo(`/pages/goods/goods-list?coupon_id=${coupon._id}`);
		},
		countDownChange(e,coupon){
			let str = ``;
			if (e.days) {
				e.hours += e.days * 24;
			}
			str += e.hours < 10 ? `0${e.hours}时` : `${e.hours}时`;
			str += e.minutes < 10 ? `0${e.minutes}分` : `${e.minutes}分`;
			str += e.seconds < 10 ? `0${e.seconds}秒` : `${e.seconds}秒`;

			this.$set(coupon,"receive_start_time_str",str);
		}
	},
	// 监听器
	watch:{

	},
	// 计算属性
	computed: {
		reductionCom(){
			let that = this;
			let { vk, coupon } = that;
			let str = "";
			let min_amount = parseFloat(vk.pubfn.priceFilter(coupon.coupon_rule.min_amount));
			if (coupon.type === 1){
				let discount_amount = parseFloat(vk.pubfn.priceFilter(coupon.coupon_rule.discount_amount));
				str = `满${min_amount}元减${discount_amount}元`;
			} else if (coupon.type === 2){
				let discount_proportion = vk.pubfn.discountFilter(coupon.coupon_rule.discount_proportion);
				str = `满${min_amount}元打${discount_proportion}`;
			}
			return str;
		},
		typeCom(){
			let that = this;
			let { vk, coupon } = that;
			let arr = ["","满减券","折扣券","随机金额券","商品兑换券","通用券"];
			return arr[coupon.type];
		},
		availableRangeRuleCom(){
			let that = this;
			let { vk, coupon } = that;
			let str = "全场通用";
			let type = vk.pubfn.getData(coupon,"available_range_rule.type");
			if (type != 0) {
				str = "仅部分商品可用";
			}
			return str;
		},
		effectiveTimeRuleCom(){
			let that = this;
			let { vk, coupon } = that;
			let { effective_time_rule } = coupon;
			let {
				type,
				start_fixed_time,
				end_fixed_time,
				start_dynamic_time,
				end_dynamic_time,
			} = effective_time_rule;

			let str = "";
			if (type === 0) {
				str = `有效期：${vk.pubfn.timeFormat(start_fixed_time)} - ${vk.pubfn.timeFormat(end_fixed_time)}`;
			} else {
				if (start_dynamic_time === 0) {
					str = `领取后${end_dynamic_time}天内可用`;
				} else {
					str = `领取${start_dynamic_time}天后才生效，有效期${end_dynamic_time}天`;
				}
			}
			return str;
		},
		disableCom(){
			let that = this;
			let { vk, coupon } = that;
			return coupon.receiveRes && coupon.receiveRes.status < 0 ? true : false;
		}
	}
};
</script>

<style lang="scss" scoped>

	/* list-item开始 */
	.list-item {
		margin: 20rpx;
		border-radius: 0rpx;
		overflow: hidden;
		box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);

		>.content {
			background-color: #ffffff;
			padding: 0rpx;
			color: #606266;
			height: 200rpx;
			display: flex;
			align-items: center;
			position: relative;
			.mt10{
				margin-top: 10rpx;
			}

			.text-one {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}

			>.left{
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 30%;
				height: 100%;
				background-color: var(--main);
				.discounts{
					display: flex;
					justify-content: center;
					align-items: flex-end;
					width: 100%;
					.min{
						color: #ffffff;
						font-size: 16px;
						font-weight: bold;
					}
					.max{
						font-size: 24px;
						color: #ffffff;
						font-weight: bold;
					}
				}
				.full-reduction{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 30px;
					font-size: 12px;
					color: #ffffff;
				}
				.jag {
					position: absolute;
					top: 0;
					left: -6rpx;
					width: 6px;
					height: 100%;
					background-size: 10px 6px;
					background-color: #fff;
					background-position: 100% 35%;
					background-image: linear-gradient(-45deg, var(--main) 25%, transparent 25%, transparent), linear-gradient(-135deg, var(--main) 25%, transparent 25%, transparent),
						linear-gradient(-45deg, transparent 75%, var(--main) 75%), linear-gradient(-135deg, transparent 75%, var(--main) 75%);
				}
			}

			>.right{
				width: 70%;
				height: 90%;
				padding: 0 4%;
				.info-title{
					display: flex;
					width: 100%;
					height: 30px;
					.tag {
						margin-right: 10rpx;
						text {
							padding: 4rpx 16rpx;
							color: #ffffff;
							background-color: var(--main);
							font-size: 24rpx;
							border-radius: 40rpx;
						}
					}
					.title {
						text {
							font-size: 24rpx;
							color: #212121;
						}
					}
				}
				.date-get {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 80rpx;
					border-bottom: 2rpx dashed #eeeeee;
					.date {
						flex:1;
						display: flex;
						align-items: center;
						text {
							font-size: 24rpx;
							color: #555555;
						}
					}
					.get {
						text {
							padding: 10rpx 20rpx;
							background-color: var(--main);
							color: #ffffff;
							font-size: 24rpx;
							border-radius: 100rpx;
						}
						text:active{
							filter: grayscale(50%);
						}
						.use {
							background-color: transparent;
							border: 1px solid var(--main);
							color: var(--main);
						}
					}
				}
				.describe-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 40rpx;
					text {
						color: #555555;
						font-size: 24rpx;
					}
					.more {
						transform: rotate(90deg);
					}
				}
			}


		}

		.collapse {
			display: none;
			padding: 20rpx;
			font-size: 24rpx;
			color: #909399;
			line-height: 40rpx;
			background-color: #ffffff;
			border-top: 1px solid #f8f8fa;
		}

		.collapse.actived {
			display: block;
		}
	}

	.list-item.coupon-lose{
		.left{
			background-color: #c0c0c0;
			.jag {
				position: absolute;
				top: 0;
				left: -6rpx;
				width: 6px;
				height: 100%;
				background-size: 10px 6px;
				background-color: #fff;
				background-position: 100% 35%;
				background-image: linear-gradient(-45deg, #c0c0c0 25%, transparent 25%, transparent), linear-gradient(-135deg, #c0c0c0 25%, transparent 25%, transparent),
					linear-gradient(-45deg, transparent 75%, #c0c0c0 75%), linear-gradient(-135deg, transparent 75%, #c0c0c0 75%);
			}
		}
		.right{
			.info-title{
				.tag{
					text{
						background-color: #c0c0c0;
					}
				}
				.title{
					text{
						color: #c0c0c0;
					}
				}
			}
			.date-get{
				.date{
					text{
						color: #c0c0c0;
					}
				}
			}

			.date-get {
				.get {
					text {
						background-color: #c0c0c0;
					}
					.use {
						border: 1px solid #c0c0c0;
						color: #c0c0c0;
					}
				}
			}
		}
	}
	/* list-item结束 */

</style>
